<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Volta – 唱片公司和音乐流媒体</title>
    <link rel="shortcut icon" href="static/img/favicon.ico"/>
    <base href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">
</head>
<body>
<jsp:include page="/pages/common/NAV.jsp"/>
<!-- main content -->
<main class="main">
    <div class="container-fluid">
        <div class="row row--grid">
            <!-- breadcrumb -->
            <div class="col-12">
                <ul class="breadcrumb">
                    <li class="breadcrumb__item"><a href="index.jsp">主页</a></li>
                    <li class="breadcrumb__item"><a href="pages/releases.jsp">播放</a></li>
                    <li class="breadcrumb__item breadcrumb__item--active">音乐单</li>
                </ul>
            </div>
            <!-- end breadcrumb -->
            <!-- title -->
            <div class="col-12">
                <div class="main__title main__title--page">
                    <h1>${requestScope.album.authorname}--${requestScope.album.album_name}</h1>
                </div>
            </div>
            <!-- end title -->
            <div class="col-12">
                <div class="release">
                    <div class="release__content">
                        <div class="release__cover">
                            <img src="${requestScope.album.album_faceimg}" alt="">
                        </div>
                        <div class="release__stat">
                            <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M21.65,2.24a1,1,0,0,0-.8-.23l-13,2A1,1,0,0,0,7,5V15.35A3.45,3.45,0,0,0,5.5,15,3.5,3.5,0,1,0,9,18.5V10.86L20,9.17v4.18A3.45,3.45,0,0,0,18.5,13,3.5,3.5,0,1,0,22,16.5V3A1,1,0,0,0,21.65,2.24ZM5.5,20A1.5,1.5,0,1,1,7,18.5,1.5,1.5,0,0,1,5.5,20Zm13-2A1.5,1.5,0,1,1,20,16.5,1.5,1.5,0,0,1,18.5,18ZM20,7.14,9,8.83v-3L20,4.17Z"/></svg> ${requestScope.album.count} tracks</span>
                            <span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path d="M20,13.18V11A8,8,0,0,0,4,11v2.18A3,3,0,0,0,2,16v2a3,3,0,0,0,3,3H8a1,1,0,0,0,1-1V14a1,1,0,0,0-1-1H6V11a6,6,0,0,1,12,0v2H16a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h3a3,3,0,0,0,3-3V16A3,3,0,0,0,20,13.18ZM7,15v4H5a1,1,0,0,1-1-1V16a1,1,0,0,1,1-1Zm13,3a1,1,0,0,1-1,1H17V15h2a1,1,0,0,1,1,1Z"/></svg>
                                ${requestScope.album.popularity}</span>
                        </div>
                        <a href="#modal-buy" class="release__buy open-modal">购买专辑 – $${requestScope.album.price}</a>
                    </div>
                    <%--存放id值--%>
                    <input type="hidden" name="id" value="${requestScope.album.id}">
                    <div class="release__list">
                        <ul class="main__list main__list--playlist main__list--dashbox">
                            <c:forEach items="${requestScope.musics}" var="music">
                                <li class="single-item">
                                    <a data-playlist data-title="${music.song_name}"
                                       data-artist="${requestScope.album.authorname}"
                                       data-img="static/img/covers/cover.svg"
                                       href="${music.srcpath}"
                                       class="single-item__cover">
                                        <img src="static/img/covers/cover.svg" alt="">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                            <path d="M18.54,9,8.88,3.46a3.42,3.42,0,0,0-5.13,3V17.58A3.42,3.42,0,0,0,7.17,21a3.43,3.43,0,0,0,1.71-.46L18.54,15a3.42,3.42,0,0,0,0-5.92Zm-1,4.19L7.88,18.81a1.44,1.44,0,0,1-1.42,0,1.42,1.42,0,0,1-.71-1.23V6.42a1.42,1.42,0,0,1,.71-1.23A1.51,1.51,0,0,1,7.17,5a1.54,1.54,0,0,1,.71.19l9.66,5.58a1.42,1.42,0,0,1,0,2.46Z"/>
                                        </svg>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                            <path d="M16,2a3,3,0,0,0-3,3V19a3,3,0,0,0,6,0V5A3,3,0,0,0,16,2Zm1,17a1,1,0,0,1-2,0V5a1,1,0,0,1,2,0ZM8,2A3,3,0,0,0,5,5V19a3,3,0,0,0,6,0V5A3,3,0,0,0,8,2ZM9,19a1,1,0,0,1-2,0V5A1,1,0,0,1,9,5Z"/>
                                        </svg>
                                    </a>
                                    <div class="single-item__title">
                                        <h4><a href="javascript:void (0)">${music.number}.${music.song_name}</a></h4>
                                        <span><a href="pages/pag/artist.jsp">${music.authorname}</a></span>
                                    </div>
                                    <a href="javascript:void (0)" class="single-item__add"
                                       onclick="layyer(${music.id})">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                            <path d="M19,11H13V5a1,1,0,0,0-2,0v6H5a1,1,0,0,0,0,2h6v6a1,1,0,0,0,2,0V13h6a1,1,0,0,0,0-2Z"></path>
                                        </svg>
                                    </a>
                                    <a href="javascript:void (0)" class="single-item__export" onclick="layout()">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                            <path d="M21,14a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v4a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V15A1,1,0,0,0,21,14Zm-9.71,1.71a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,12.59V3a1,1,0,0,0-2,0v9.59l-2.29-2.3a1,1,0,1,0-1.42,1.42Z"></path>
                                        </svg>
                                    </a>
                                    <span class="single-item__time">${Math.round(music.duration/60)} ：<c:choose><c:when test="${music.duration%60<10}">0${music.duration%60}</c:when><c:otherwise>${music.duration%60}</c:otherwise></c:choose></span>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-8">
                <div class="article">
                    <!-- article content -->
                    <div class="article__content">
                        <h4>关于新专辑</h4>
                        <p>Lorem Ipsum的段落有许多<b>变体</b>，但大多数都<a href="">遭受</a>了某种形式的改变，通过注入幽默或看起来甚至不可信的随机单词。
                        </p>
                        <p>它在1960年代随着包含Lorem Ipsum段落的Letraset表的发布而普及，最近在Aldus
                            PageMaker等桌面出版软件中普及，包括Lorem Ipsum的版本。</p>
                    </div>
                    <!-- end article content -->
                    <!-- share -->
                    <div class="share">
                        <a href="javascript:void (0)" class="share__link share__link--fb">
                            <svg width="9" height="17" viewBox="0 0 9 17" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.56341 16.8197V8.65888H7.81615L8.11468 5.84663H5.56341L5.56724 4.43907C5.56724 3.70559 5.63693 3.31257 6.69042 3.31257H8.09873V0.5H5.84568C3.1394 0.5 2.18686 1.86425 2.18686 4.15848V5.84695H0.499939V8.6592H2.18686V16.8197H5.56341Z"/>
                            </svg>
                            share</a>
                        <a href="javascript:void (0)" class="share__link share__link--tw">
                            <svg width="16" height="12" viewBox="0 0 16 12" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.55075 3.19219L7.58223 3.71122L7.05762 3.64767C5.14804 3.40404 3.47978 2.57782 2.06334 1.1902L1.37085 0.501686L1.19248 1.01013C0.814766 2.14353 1.05609 3.34048 1.843 4.14552C2.26269 4.5904 2.16826 4.65396 1.4443 4.38914C1.19248 4.3044 0.972149 4.24085 0.951164 4.27263C0.877719 4.34677 1.12953 5.31069 1.32888 5.69202C1.60168 6.22165 2.15777 6.74068 2.76631 7.04787L3.28043 7.2915L2.67188 7.30209C2.08432 7.30209 2.06334 7.31268 2.12629 7.53512C2.33613 8.22364 3.16502 8.95452 4.08833 9.2723L4.73884 9.49474L4.17227 9.8337C3.33289 10.321 2.34663 10.5964 1.36036 10.6175C0.888211 10.6281 0.5 10.6705 0.5 10.7023C0.5 10.8082 1.78005 11.4014 2.52499 11.6344C4.75983 12.3229 7.41435 12.0264 9.40787 10.8506C10.8243 10.0138 12.2408 8.35075 12.9018 6.74068C13.2585 5.88269 13.6152 4.315 13.6152 3.56293C13.6152 3.07567 13.6467 3.01212 14.2343 2.42953C14.5805 2.09056 14.9058 1.71983 14.9687 1.6139C15.0737 1.41264 15.0632 1.41264 14.5281 1.59272C13.6362 1.91049 13.5103 1.86812 13.951 1.39146C14.2762 1.0525 14.6645 0.438131 14.6645 0.258058C14.6645 0.22628 14.5071 0.279243 14.3287 0.374576C14.1398 0.480501 13.7202 0.639389 13.4054 0.734722L12.8388 0.914795L12.3247 0.565241C12.0414 0.374576 11.6427 0.162725 11.4329 0.0991699C10.8978 -0.0491255 10.0794 -0.0279404 9.59673 0.14154C8.2852 0.618204 7.45632 1.84694 7.55075 3.19219Z"/>
                            </svg>
                            tweet</a>
                        <a href="javascript:void (0)" class="share__link share__link--vk">
                            <svg width="16" height="9" viewBox="0 0 16 9" fill="none"
                                 xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.78479 8.92255C8.78479 8.92255 9.07355 8.89106 9.22145 8.73512C9.35684 8.59224 9.35214 8.32262 9.35214 8.32262C9.35214 8.32262 9.33414 7.06361 9.92967 6.87771C10.5166 6.69489 11.2702 8.09524 12.07 8.63372C12.6741 9.04085 13.1327 8.95174 13.1327 8.95174L15.2699 8.92255C15.2699 8.92255 16.3874 8.85495 15.8576 7.99231C15.8137 7.92164 15.5485 7.35397 14.269 6.1879C12.9284 4.9673 13.1084 5.16472 14.7221 3.05305C15.705 1.76715 16.0978 0.982093 15.975 0.646407C15.8584 0.325317 15.1353 0.410582 15.1353 0.410582L12.7297 0.425177C12.7297 0.425177 12.5513 0.401365 12.419 0.478949C12.2899 0.554996 12.2061 0.732441 12.2061 0.732441C12.2061 0.732441 11.8258 1.72721 11.3179 2.57372C10.2466 4.35892 9.81855 4.4534 9.64326 4.34279C9.23554 4.08392 9.33727 3.30424 9.33727 2.75039C9.33727 1.01973 9.60491 0.298431 8.81687 0.111769C8.5555 0.0495478 8.36299 0.00883541 7.6939 0.00192196C6.83543 -0.00652779 6.10921 0.00499461 5.69758 0.202411C5.42369 0.333767 5.2124 0.627203 5.34152 0.644103C5.50038 0.664843 5.86036 0.739354 6.0513 0.994383C6.29781 1.32392 6.2892 2.06289 6.2892 2.06289C6.2892 2.06289 6.43084 4.10005 5.95818 4.35277C5.6342 4.52638 5.1897 4.17226 4.2342 2.55221C3.7451 1.7226 3.37573 0.805416 3.37573 0.805416C3.37573 0.805416 3.30451 0.634117 3.17696 0.541938C3.02279 0.430555 2.80759 0.395987 2.80759 0.395987L0.521729 0.410582C0.521729 0.410582 0.178185 0.4198 0.0521924 0.566519C-0.0597138 0.696338 0.0435842 0.965961 0.0435842 0.965961C0.0435842 0.965961 1.8333 5.07638 3.86013 7.1481C5.71871 9.04699 7.8285 8.92255 7.8285 8.92255H8.78479Z"/>
                            </svg>
                            share</a>
                    </div>
                    <!-- end share -->
                    <!-- comments -->
                    <div class="comments">
                        <div class="comments__title">
                            <h4>评论</h4>
                            <span>3</span>
                        </div>
                        <form action="CommentServlet" id="comments-answer" class="comments__form">
                            <input type="hidden" name="action" value="addComment">
                            <div class="sign__group">
                                <input type="hidden" name="ablumid" value="${requestScope.album.id}">
                                <input type="hidden" name="commentid" value="">
                                <textarea id="text" name="comment" class="sign__textarea"
                                          placeholder="添加评论"></textarea>
                            </div>
                            <button type="submit" class="sign__btn">发送</button>
                        </form>
                        <ul class="comments__list"
                            style="height: 500px !important;overflow: auto">
                            <li class="comments__item" style="display: none">
                                <div class="comments__autor">
                                    <img class="comments__avatar" src="static/img/avatar.svg" alt="">
                                    <span class="comments__name">John Doe</span>
                                    <span class="comments__time">30.08.2021, 17:53</span>
                                </div>
                                <p class="comments__text">LoremIpsum的段落有许多变体，但大多数</p>
                                <div class="comments__actions">
                                    <div class="comments__rate">
                                        <button type="button" class="btn1">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19ZM16 11H8C7.73478 11 7.48043 11.1054 7.29289 11.2929C7.10536 11.4804 7 11.7348 7 12C7 12.2652 7.10536 12.5196 7.29289 12.7071C7.48043 12.8946 7.73478 13 8 13H16C16.2652 13 16.5196 12.8946 16.7071 12.7071C16.8946 12.5196 17 12.2652 17 12C17 11.7348 16.8946 11.4804 16.7071 11.2929C16.5196 11.1054 16.2652 11 16 11Z"/>
                                                <path d="M13 16V8C13 7.73478 12.8946 7.48043 12.7071 7.29289C12.5196 7.10536 12.2652 7 12 7C11.7348 7 11.4804 7.10536 11.2929 7.29289C11.1054 7.48043 11 7.73478 11 8V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4804 16.8946 11.7348 17 12 17C12.2652 17 12.5196 16.8946 12.7071 16.7071C12.8946 16.5196 13 16.2652 13 16Z"/>
                                            </svg>
                                            <span>12</span>
                                        </button>
                                        <button type="button" class="btn2"><span>7</span>
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19ZM16 11H8C7.73478 11 7.48043 11.1054 7.29289 11.2929C7.10536 11.4804 7 11.7348 7 12C7 12.2652 7.10536 12.5196 7.29289 12.7071C7.48043 12.8946 7.73478 13 8 13H16C16.2652 13 16.5196 12.8946 16.7071 12.7071C16.8946 12.5196 17 12.2652 17 12C17 11.7348 16.8946 11.4804 16.7071 11.2929C16.5196 11.1054 16.2652 11 16 11Z"/>
                                            </svg>
                                        </button>
                                    </div>
                                    <button type="button">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                            <path d="M21.707,11.293l-8-8A.99991.99991,0,0,0,12,4V7.54492A11.01525,11.01525,0,0,0,2,18.5V20a1,1,0,0,0,1.78418.62061,11.45625,11.45625,0,0,1,7.88672-4.04932c.0498-.00635.1748-.01611.3291-.02588V20a.99991.99991,0,0,0,1.707.707l8-8A.99962.99962,0,0,0,21.707,11.293ZM14,17.58594V15.5a.99974.99974,0,0,0-1-1c-.25488,0-1.2959.04932-1.56152.085A14.00507,14.00507,0,0,0,4.05176,17.5332,9.01266,9.01266,0,0,1,13,9.5a.99974.99974,0,0,0,1-1V6.41406L19.58594,12Z"/>
                                        </svg>
                                        <span>分享</span></button>
                                    <button type="button">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                            <path d="M10.3,10.75A1,1,0,1,0,9,9.25,3,3,0,1,1,7,4,3,3,0,0,1,9.23,5H8A1,1,0,0,0,8,7h3a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0h0a5,5,0,1,0,.3,7.75ZM19,6H15a1,1,0,0,0,0,2h4a1,1,0,0,1,1,1v9.72l-1.57-1.45a1,1,0,0,0-.68-.27H9a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v1a3,3,0,0,0,3,3h8.36l3,2.73A1,1,0,0,0,21,22a1.1,1.1,0,0,0,.4-.08A1,1,0,0,0,22,21V9A3,3,0,0,0,19,6Z"/>
                                        </svg>
                                        <span><a href="javascript:void (0)">回复</a></span></button>
                                </div>
                            </li>
                            <li class="comments__item comments__item--answer" style="display: none">
                                <div class="comments__autor">
                                    <img class="comments__avatar" src="static/img/avatar.svg" alt="">
                                    <span class="comments__name">John Doe</span>
                                    <span class="comments__time">24.08.2021, 16:41</span>
                                </div>
                                <p class="comments__text">Lorem Ipsum只是印刷和排版行业的虚拟文本。自 1500
                                    年代以来，Lorem</p>
                                <div class="comments__actions">
                                    <div class="comments__rate">
                                        <button type="button" class="btn1">
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19ZM16 11H8C7.73478 11 7.48043 11.1054 7.29289 11.2929C7.10536 11.4804 7 11.7348 7 12C7 12.2652 7.10536 12.5196 7.29289 12.7071C7.48043 12.8946 7.73478 13 8 13H16C16.2652 13 16.5196 12.8946 16.7071 12.7071C16.8946 12.5196 17 12.2652 17 12C17 11.7348 16.8946 11.4804 16.7071 11.2929C16.5196 11.1054 16.2652 11 16 11Z"/>
                                                <path d="M13 16V8C13 7.73478 12.8946 7.48043 12.7071 7.29289C12.5196 7.10536 12.2652 7 12 7C11.7348 7 11.4804 7.10536 11.2929 7.29289C11.1054 7.48043 11 7.73478 11 8V16C11 16.2652 11.1054 16.5196 11.2929 16.7071C11.4804 16.8946 11.7348 17 12 17C12.2652 17 12.5196 16.8946 12.7071 16.7071C12.8946 16.5196 13 16.2652 13 16Z"/>
                                            </svg>
                                            <span>10</span>
                                        </button>

                                        <button type="button" class="btn2"><span>10</span>
                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M19 2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V19C2 19.7956 2.31607 20.5587 2.87868 21.1213C3.44129 21.6839 4.20435 22 5 22H19C19.7956 22 20.5587 21.6839 21.1213 21.1213C21.6839 20.5587 22 19.7956 22 19V5C22 4.20435 21.6839 3.44129 21.1213 2.87868C20.5587 2.31607 19.7956 2 19 2ZM20 19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V19ZM16 11H8C7.73478 11 7.48043 11.1054 7.29289 11.2929C7.10536 11.4804 7 11.7348 7 12C7 12.2652 7.10536 12.5196 7.29289 12.7071C7.48043 12.8946 7.73478 13 8 13H16C16.2652 13 16.5196 12.8946 16.7071 12.7071C16.8946 12.5196 17 12.2652 17 12C17 11.7348 16.8946 11.4804 16.7071 11.2929C16.5196 11.1054 16.2652 11 16 11Z"/>
                                            </svg>
                                        </button>
                                    </div>
                                    <button type="button">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                            <path d="M21.707,11.293l-8-8A.99991.99991,0,0,0,12,4V7.54492A11.01525,11.01525,0,0,0,2,18.5V20a1,1,0,0,0,1.78418.62061,11.45625,11.45625,0,0,1,7.88672-4.04932c.0498-.00635.1748-.01611.3291-.02588V20a.99991.99991,0,0,0,1.707.707l8-8A.99962.99962,0,0,0,21.707,11.293ZM14,17.58594V15.5a.99974.99974,0,0,0-1-1c-.25488,0-1.2959.04932-1.56152.085A14.00507,14.00507,0,0,0,4.05176,17.5332,9.01266,9.01266,0,0,1,13,9.5a.99974.99974,0,0,0,1-1V6.41406L19.58594,12Z"/>
                                        </svg>
                                        <span>分享</span></button>
                                    <button type="button">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                            <path d="M10.3,10.75A1,1,0,1,0,9,9.25,3,3,0,1,1,7,4,3,3,0,0,1,9.23,5H8A1,1,0,0,0,8,7h3a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0h0a5,5,0,1,0,.3,7.75ZM19,6H15a1,1,0,0,0,0,2h4a1,1,0,0,1,1,1v9.72l-1.57-1.45a1,1,0,0,0-.68-.27H9a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v1a3,3,0,0,0,3,3h8.36l3,2.73A1,1,0,0,0,21,22a1.1,1.1,0,0,0,.4-.08A1,1,0,0,0,22,21V9A3,3,0,0,0,19,6Z"/>
                                        </svg>
                                        <span><a href="javascript:void (0)">回复</a></span></button>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- end comments -->
                </div>
            </div>
            <div class="col-12 col-lg-4">
                <!-- releases -->
                <div class="row row--sidebar">
                    <!-- title -->
                    <div class="col-12">
                        <div class="main__title main__title--sidebar">
                            <h3>此类型其他版本</h3>
                        </div>
                    </div>
                    <!-- end title -->
                    <c:forEach items="${requestScope.albumPage}" var="album">
                        <c:if test="${album.id != (requestScope.album.id)}">
                            <div class="col-6 col-sm-4 col-lg-6">
                                <div class="album album--sidebar">
                                    <div class="album__cover">
                                        <img src="${album.album_faceimg}" alt="">
                                        <a href="AlbumServlet?action=toRelease&id=${album.id}">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                                <path d="M18.54,9,8.88,3.46a3.42,3.42,0,0,0-5.13,3V17.58A3.42,3.42,0,0,0,7.17,21a3.43,3.43,0,0,0,1.71-.46L18.54,15a3.42,3.42,0,0,0,0-5.92Zm-1,4.19L7.88,18.81a1.44,1.44,0,0,1-1.42,0,1.42,1.42,0,0,1-.71-1.23V6.42a1.42,1.42,0,0,1,.71-1.23A1.51,1.51,0,0,1,7.17,5a1.54,1.54,0,0,1,.71.19l9.66,5.58a1.42,1.42,0,0,1,0,2.46Z"/>
                                            </svg>
                                        </a>
                                        <span class="album__stat">
										<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path
                                                d="M3.71,16.29a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21,1,1,0,0,0-.21.33,1,1,0,0,0,.21,1.09,1.15,1.15,0,0,0,.33.21.94.94,0,0,0,.76,0,1.15,1.15,0,0,0,.33-.21,1,1,0,0,0,.21-1.09A1,1,0,0,0,3.71,16.29ZM7,8H21a1,1,0,0,0,0-2H7A1,1,0,0,0,7,8ZM3.71,11.29a1,1,0,0,0-1.09-.21,1.15,1.15,0,0,0-.33.21,1,1,0,0,0-.21.33.94.94,0,0,0,0,.76,1.15,1.15,0,0,0,.21.33,1.15,1.15,0,0,0,.33.21.94.94,0,0,0,.76,0,1.15,1.15,0,0,0,.33-.21,1.15,1.15,0,0,0,.21-.33.94.94,0,0,0,0-.76A1,1,0,0,0,3.71,11.29ZM21,11H7a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2ZM3.71,6.29a1,1,0,0,0-.33-.21,1,1,0,0,0-1.09.21,1.15,1.15,0,0,0-.21.33.94.94,0,0,0,0,.76,1.15,1.15,0,0,0,.21.33,1.15,1.15,0,0,0,.33.21,1,1,0,0,0,1.09-.21,1.15,1.15,0,0,0,.21-.33.94.94,0,0,0,0-.76A1.15,1.15,0,0,0,3.71,6.29ZM21,16H7a1,1,0,0,0,0,2H21a1,1,0,0,0,0-2Z"/></svg>
                                                ${album.count}</span>
										<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path
                                                d="M20,13.18V11A8,8,0,0,0,4,11v2.18A3,3,0,0,0,2,16v2a3,3,0,0,0,3,3H8a1,1,0,0,0,1-1V14a1,1,0,0,0-1-1H6V11a6,6,0,0,1,12,0v2H16a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1h3a3,3,0,0,0,3-3V16A3,3,0,0,0,20,13.18ZM7,15v4H5a1,1,0,0,1-1-1V16a1,1,0,0,1,1-1Zm13,3a1,1,0,0,1-1,1H17V15h2a1,1,0,0,1,1,1Z"/></svg>
                                                ${album.popularity}</span>
									</span>
                                    </div>
                                    <div class="album__title">
                                        <h3>
                                            <a href="AlbumServlet?action=toRelease&id=${album.id}">${album.album_name}</a>
                                        </h3>
                                        <span><a
                                                href="AlbumServlet?action=toArtist&id=${album.art_id}">${album.authorname}</a></span>
                                    </div>
                                </div>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
                <!-- end releases -->
            </div>
        </div>
    </div>
</main>
<script>
    $("button span a").click(function () {
        $("#comments-answer[ddd=delet]").remove();
        let de = $(this).parents("li");
        var id = de.attr("id");
        var newform = $("#comments-answer").clone(true);
        newform.attr("ddd", "delet");
        newform.find("input[name=action]").val("addReplay");
        newform.find("input[name=commentid]").val(id);
        newform.insertAfter(de);
    })

    var info;

    function layyer(mid) {
        $.post("MyloveServlet", "action=addMylove&mid=" + mid, function (msg) {
            layer.msg(msg.substring(1), {
                icon: msg.substring(0, 1),
                time: 2000,
                anim: 6
            })
        }, "json")
    }

    function layout() {
        layer.msg("下载成功", {
            icon: 1,
            time: 2000
        })
    }

    function mycomment(pageNo, albumId) {
        $.post("AlbumServlet", "action=searchAlbumCommentPage&pageNo=" + pageNo + "&album_id=" + albumId, function (msg) {
            $("div.comments__title span").html(msg.pageTotalCount);
            for (let i = 0; i < msg.items.length; i++) {
                let newdiv = $("ul.comments__list li.comments__item:first").clone(true);
                newdiv.css("display", "").attr("id", msg.items[i].id);
                newdiv.find("div.comments__autor img.comments__avatar").attr("src", msg.items[i].userfaceimg);
                newdiv.find("div.comments__autor span.comments__name").html(msg.items[i].username);
                newdiv.find("div.comments__autor span.comments__time").html(msg.items[i].regtime);
                newdiv.find("p.comments__text").html(msg.items[i].comment);
                newdiv.find("button.btn1 span").html(msg.items[i].zanzhen);
                newdiv.find("button.btn2 span").html(msg.items[i].zanfu);
                newdiv.appendTo($("ul.comments__list"));
                for (let j = 0; j < msg.items[i].replay.length; j++) {
                    let newdivli = $("ul.comments__list li.comments__item--answer:first").clone(true);
                    newdivli.css("display", "").attr("id", msg.items[i].replay[j].replay_id);
                    newdivli.find("div.comments__autor img.comments__avatar").attr("src", msg.items[i].replay[j].userfaceimg);
                    newdivli.find("div.comments__autor span.comments__name").html(msg.items[i].replay[j].username);
                    newdivli.find("div.comments__autor span.comments__time").html(msg.items[i].replay[j].regtime);
                    newdivli.find("p.comments__text").html(msg.items[i].replay[j].replaycomment);
                    newdivli.find("button.btn1 span").html(msg.items[i].replay[j].zanzhen);
                    newdivli.find("button.btn2 span").html(msg.items[i].replay[j].zanfu);
                    newdivli.appendTo($("ul.comments__list"));
                }
            }
        }, "json")
    }

    function updateReplayZan(info, id) {
        return new Promise(function (resolve, reject) {
            $.get("AlbumServlet", "action=updateReplayZan&info=" + info + "&id=" + id, function (msg) {
                resolve(msg);
            }, "json").fail(function () {
                reject('Error updating replay.');
            });
        });
    }

    function updateCommentZan(info, id) {
        return new Promise(function (resolve, reject) {
            $.get("AlbumServlet", "action=updateCommentZan&info=" + info + "&id=" + id, function (msg) {
                resolve(msg);
            }, "json").fail(function () {
                reject('Error updating replay.');
            });
        });
    }

    $("li.comments__item button.btn1").click(function () {
        let id = $(this).parents("li").attr("id");
        info = "点赞";
        let count = parseInt($(this).find("span").html());
        let span = $(this).find("span");
        updateCommentZan(info, id).then(function (msg) {
            count = count + parseInt(msg);  // 这里更新count的值
            span.html(count);
        }).catch(function (error) {
            alert("出错了");
        });
    });
    $("li.comments__item button.btn2").click(function () {
        let id = $(this).parents("li").attr("id");
        info = "踩一下";
        let count = parseInt($(this).find("span").html());
        let span = $(this).find("span");
        updateCommentZan(info, id).then(function (msg) {
            count = count + parseInt(msg);  // 这里更新count的值
            span.html(count);
        }).catch(function (error) {
            alert("出错了");
        });
    })
    $("li.comments__item--answer button.btn1").click(function () {
        let id = $(this).parents("li").attr("id");
        info = "点赞";
        let count = parseInt($(this).find("span").html());
        let span = $(this).find("span");
        updateReplayZan(info, id).then(function (msg) {
            count = count + parseInt(msg);  // 这里更新count的值
            span.html(count);
        }).catch(function (error) {
            alert("出错了");
        });
    })
    $("li.comments__item--answer button.btn2").click(function () {
        let id = $(this).parents("li").attr("id");
        info = "踩一下";
        let span = $(this).find("span");
        let count = parseInt($(this).find("span").html());
        updateReplayZan(info, id).then(function (msg) {
            count = count + parseInt(msg);
            span.html(count);
        }).catch(function (error) {
            alert("出错了");
        });
    })

    $(function () {
        var pageNo = 1;
        var albumId = $("input[name=id]").val();
        mycomment(pageNo, albumId);
        //滚动事件.加载新数据
        $("ul.comments__list").scroll(function () {
            if (this.scrollTop + this.clientHeight + 1 > this.scrollHeight) {
                if (pageinfo.pageNo < pageinfo.pageTotal) {
                    pageNo = pageNo + 1;
                    mycomment(pageNo, albumId);
                }
            }
        })
    })
</script>
<!-- modal buy -->
<form action="#" id="modal-buy" class="zoom-anim-dialog mfp-hide modal modal--form">
    <button class="modal__close" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path d="M13.41,12l4.3-4.29a1,1,0,1,0-1.42-1.42L12,10.59,7.71,6.29A1,1,0,0,0,6.29,7.71L10.59,12l-4.3,4.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0L12,13.41l4.29,4.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42Z"></path>
        </svg>
    </button>
    <h4 class="sign__title">购买音乐专辑</h4>

    <div class="sign__group sign__group--row">
        <label class="sign__label">您的余额:</label>
        <span class="sign__value">$ ${sessionScope.user.balance}</span>
    </div>

    <div class="sign__group sign__group--row">
        <label class="sign__label">价格:</label>
        <span class="sign__value">$ ${requestScope.album.price}</span>

        <span class="sign__text sign__text--small">您可以从您的帐户中花钱更新连接的包裹，或在我们的网站上购买商品。</span>
    </div>

    <button class="sign__btn" type="submit">购买</button>
</form>
<!-- end modal buy -->

<!-- end main content -->
<%@ include file="../common/modal_info.jsp" %>
<%@ include file="../common/footer.jsp" %>
</body>
</html>